其實 tailwindcss 寫久了，就會發現原始碼會充滿著 css 的樣式屬性，在維護上不是那樣方便。但現在也有非常多基於 tailwindcss 的框架，這...
這個單元繼續來介紹其它好用的插件，下拉式選單插件。 首先一樣在專案目錄下安裝： npm install tailwindcss-dropdown 然後在 ta...
雖然在 tailwindcss 可以製作出豐富的 UI 元件，但還是有許多已經寫好的元件可以直接使用，不需要重複製作輪子。 這個單元將討論 tailwindcs...
這個單元要來介紹 tailwindcss 的設定檔案。 在專案結構中有一個檔案為 tailwind.config.js： /** @type {import('...
如果真的有一步一步看過這個系列的教學文章，可以發現在 tailwindcss 的世界中，雖然可以很清楚的了解每一個元件的命名以及異議，例如：w-32 就表示寬度...
這個單元繼續來討論表單的進階用法。 一個基礎的表單的 checkbox ，可能會這樣宣告： <div class="flex min-h-scr...
這個單元來討論一些關於表單 input 的一些進階用法。 回到 tailwindcss - 從零開始學 - Day16 直接使用其最後的完整表單 input 樣...
這個單元來討論 hover 的進階用法，在之前的 Day4 - 一個簡單的按鈕 已經了解到當滑鼠移動到會產生事件行為需要使用 hover:，後面可以接上任何的屬...
這個單元來實作登入畫面這個單元來實作登入畫面，最後希望完成的畫面如： 首先一開始宣告整個架構的 div 標籤： <div> <div&g...
在上一個單元了解到如何建立一個基本款的表格樣式，在表格的顯示方式，如果表格的行或列的數目太多，會希望在滑動的時候卡住某一行或某一列定住在原位置不動，就像使用 G...
這個單元要來介紹表格的基本做法，首先，先宣告一個最基本的表格： <table> <thead> <tr>...
前面兩個單元討論了如何建構出表單內的欄位，但目前只有討論到 input 與 checkbox，這個單元將會討論所有欄位的寫法。 在 Day16 討論過的 inp...
這個單元繼續討論表單的元件，checkbox。 首先先宣告一個基本的 checkbox： <input type="checkbox"...
在上一個單元最終完成的表單輸入欄位樣式為： <input class="w-full rounded-lg border border-gray...
這個單元要開始來討論表單的製作方式，最後呈現的樣子： 先宣告一個最基本的表單輸入框： <input class="f" type=&...
上一個單元介紹了左右兩側的排版，這個單元要來介紹三列式的排版，並且三列都各自獨立有自己的滑動視窗，完成之後會呈現這個樣子： 首先，老樣子，宣告 div 的架構...
這個單元要來繼續完成 Dashboard 排版，上一個單元完成了以下的排版方式： <div class="flex h-screen"...
接下來這個單元要開始來討論 Dashboard 排版製作的方法，因為這是很常見的排版方式，這個單元將會完成這個排版的樣子，會呈現一個左右兩側的排版方式： 一開...
這個單元將繼續使用 relative 與 absolute 來製作另外一種卡片排版。這是完整的樣子： 一開始宣告 div 標籤： <div class=...
在上一個單元完成了一個有圖片的卡片排版，接下來將這個卡片排版修改成圖片是用背景的方式呈現，最終的成果如： 首先，延續上一個單元所完成的宣告： <div...
這個單元繼續來介紹卡片排版的方式，前一個單元介紹了一種非常簡單的卡片排版，接下來要來介紹包含圖片的卡片排版方式。 一開始一樣宣告 div 標籤，與文字標籤： &...
這個單元將接續上一個單元製作的卡片排版來延伸。 一般來說使用卡片排版，會有好幾個卡片同時出現，接下來就繼續討論如何放入多個卡片排版。 一開始宣告最上層的 div...
接下來這個單元來製作一個簡單的卡片排版： 先宣告一些基本的排版： <a href="/"> <div class=...
這個單元要來練習建立一個橫幅排版，最終希望的完成品會呈現如： 首先，一樣先建立基礎的排版： <section class="">...
這個單元會延續上一個單元來繼續製作，在上一個單元完成了一個非常簡單的 header 呈現方式，但還少了非常重要的 RWD 排版： <header clas...
這個單元要來製作一個簡單的 header，使用上一個單元學習到的按鈕元件，這邊一口氣直接先放上三個按鈕： <div> <a class=&...
在真正進入到網頁排版之前，還必須弄清楚一些事情，這個單元先從一個簡單的按鈕開始，透過製作一個按鈕，進而推展到製作各種組件，最後才是排版。 首先一開始，先寫一個按...
上一個單元已經學會了如何安裝與設定一個新的專案，在進入真正的 UI 開發之前，如果只是想要單純測試某些 UI 樣板，而又不想使用上一個單元的方式建立專案，則可以...
上一個單元了解了為何要使用 tailwindcss 與其好處，接下來第一件事情一定是建立專案，要使用 tailwindcss 的方式有很多種，最快的方式就是直接...
前言 前端網頁開發至今發展 20 餘年，在 2023 年的今日如果還是想要從事網頁開發，到底該從何下手呢？還是一樣從 HTML 、CSS 與 JavaScrip...
JK 程式誌
iThome鐵人賽
看影片追技術